
<script setup>
import { ref } from 'vue'
import { onMounted } from 'vue'

//导入路由
import {useRouter} from "vue-router"
const router = useRouter()
import {login} from "@/api/user.js"

//导入静态图片
import banner1 from "../../assets/sximages/00.jpg"
import banner2 from "../../assets/sximages/06.jpg"
import banner3 from "../../assets/sximages/05.jpg"
//引入elment图标
import {User,Lock,CircleCheck} from '@element-plus/icons-vue'
components: { 
    User,Lock,CircleCheck 
}

//图片数组
const imgList = ref([
  {
    id:1,
    imgPath: banner1
  },
  {
    id:2,
    imgPath: banner2
  },
  {
    id:3,
    imgPath: banner3
  }
]);
//定义表单提交数据
const formData = ref({
  username: '',
  password: '',
  code: '',
  captcha: 'http://127.0.0.1:8080/api/captcha'
})

const captcha = () => { 
    formData.value.captcha = "http://127.0.0.1:8080/api/captcha?t="+Math.random()
}


//获取表单实例
const formRef = ref(null)

//数据校验规则
const rules = {
    username: [
      { 
        required: true,
        message: '请输入账号', 
        trigger: 'blur' //blur:失去焦点时触发 
    }
],
    password: [
      { 
        required: true,
        message: '请输入密码', 
        trigger: 'blur' //blur:失去焦点时触发 
    },
      { 
        min: 6,
        max: 15, 
        message: '长度在 6 到 15 个字符', 
    }
],
    code:[
        {
            required: true,
            message: '请输入验证码', 
            trigger: 'blur' 

    }
    ]
}
//登录操作
const userLogin = async() => { 
    formRef.value.validate((valid) => { 
        if(valid){
            login(formData.value).then((res) => { 
                if(res.code == 200){
                    console.log(res.data)
                    //将用户信息保存到本地
                    localStorage.setItem('user',JSON.stringify(res.data)) 
                    router.push('/home')
                }else{
                    alert("用户名或密码错误")
                }
            }).catch((error) => { 
                alert(error.message)
            })
        }else{
            return false;
        }
    })
}
</script>

<template>
    <div class="container">
        <!-- header -->
         <div class="header">
            <span class="title">软件工程学院</span>
            <span class="sub-title">新生报到服务平台</span>
         </div>
         <!-- main -->
          <div class="main">
            <el-carousel trigger="click"  height="650px">
                <el-carousel-item v-for="item in imgList" :key="item">
                    <img class="img" :src="item.imgPath">
                </el-carousel-item>
            </el-carousel>
            <!-- 表单区域 -->
             <el-card class="box-card">
                <p>用户登录</p>
                <el-form  ref="formRef" :model="formData" :rules="rules">

                    <el-form-item prop="username">
                        <el-input placeholder="请输入工号/手机号" v-model="formData.username " :prefix-icon="User"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input placeholder="请输入密码" v-model="formData.password" show-password :prefix-icon="Lock"></el-input>
                    </el-form-item>
                    
                    <el-form-item prop="code">
                        <el-input class="code-input" placeholder="请输入验证码" v-model="formData.code" :prefix-icon="CircleCheck"></el-input>
                    <img class="img-code" :src="formData.captcha" @click="captcha" title="点击刷新">
                </el-form-item>
                </el-form>

                    <el-checkbox v-model="checked1" label="记住密码" size="large"/>
                    <el-button type="primary" @click="userLogin()">登录</el-button>
                    <span class="forget-password">忘记密码?</span>
                    <span class="forget-zhuce">注册</span>
             </el-card>
        </div>
    </div>
</template>
<style scoped>
    .container{
        width: 100vw;
        height: 100vh;
        text-align: left;
        overflow: hidden;
    }
    .header{
        width: 100%;
        height: 8%;
        background-color: #ac1d12;
        position: relative;
    }
    .title{
        font-size: 28px;
        color: #fff;
        font-weight: bold;
        margin-left: 20px;
        line-height: 8vh;
    }
    .sub-title{
        position: absolute;
        color:#fff;
        font-size: 20;
        top: 15px;
        left: 230px
    } 
    .main{
        width: 100%;
        height: 92%;    
        background-color: greenyellow;
        position: relative;
    }
    .img{
        width: 100%;
    }
    :deep() .el-carousel__arrow {
    outline: none;
}
    .box-card{
        width: 380px;
        position: absolute;
        right: 100px;
        top: 20%;
        height: 420px;
    }
    .box-card p{
        text-align: center;
        font-size: 20px;
    }
    .code-input{
        width: 200px;
    }
    .img-code{
        width: 85px;
        margin-left: 255px;
        margin-top: 0px;
        position: absolute;
        cursor: pointer;
        
    }
    .el.-checkbox{
       display: block;
    }
    .el-button{
        width: 100%;
        outline: none;/** 取消轮廓线 */
        letter-spacing: 5px;
    }
    .forget-password{
        text-align: left;
        color: #409eff;
        font-size: 13px;
        cursor: pointer;/** 鼠标移入变手型 */
    }
    .forget-zhuce{
        text-align: right;
        margin-left: 250px;
        margin-top: -50px;
        color: #409eff;
        font-size: 13px;
        cursor: pointer;
    }
</style>